<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>欢迎页面-L-admin1.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">
    <script src="/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .layui-upload-img{
            max-width: 200px;
            margin-left: 110px;
        }
        .mask{
          display: none;
          position: fixed;
          left: 0;
          top:0;
          width: 100vw;
          height: 100vh;
          background: rgba(0,0,0,0.4);
          z-index: 100;
        }
        .sku-key{
          display: none;
          background-color: aliceblue;
          z-index: 101;
          width:400px;
          height:150px;
          display: block;
          position: fixed;
          left: 50%;
          top:50%;
          margin-top:-75px;
          margin-left:-200px;
        }
        .sku-key .layui-form-label {
          margin: 20px 0px;
        }
        .sku-key .layui-input-inline{
          margin: 20px 0px;
        }
        .sku-key .layui-form-item{
          
        }
        .sku-table{
          min-width: 600px;
          min-height: 100px;
        }
        .sku-table thead,tbody,tfoot,tr,th,td{
          padding:0px;
          margin: 0px;
        }
        .sku-table thead tr{
          border-bottom: 1px solid #000;
        }
        .sku-table thead th{
          width: 200px;
          height:30px;
          line-height: 30px;
        }
        .sku-table tbody tr{
          border-bottom: 1px solid #000;
        }
        .sku-table tbody tr td{
          width: 200px;
          text-decoration: 2em;
          font-size: 16px;
          color: #666;
          text-align: center;
        }
        .sku-table tbody tr td a{
          display: block;
          min-height: 50px;
          width: 100%; /* 宽度设置为100%，以填满父元素 */  
          height: 100%; /* 高度设置为100%，以填满父元素 */ 
        }
        .sku-table tbody tr td img{
            width: auto;
            max-height: 50px;
        }
        .sku-table tfoot{
          text-align: right;
        }
        .sku-key-title-list{
          width: 440px;
          margin-bottom: 20px;
        }
        .sku-key-title-list div{
          display: inline-block;
          padding: 10px 5px;
          margin-left: 10px;
          
        }
        .sku-key-title-list-key{
          border-bottom: 1px solid #000;
        }
        .sku-key-title-list-value div{

        }
        .sku-key-title-list-option{
          border-bottom: 1px solid #000;
        }
    </style>
  </head>
  
  <body>
    <div class="x-body">
      <div class="mask" id="mask"></div>
      <input type="file" id="upload-image-file" style="display: none;"  accept="image/*">
      <div class="sku-key" id="sku-key" style="display: none;">
        <div class="layui-form-item">
          <label for="keyname" class="layui-form-label">
              <span class="x-red">*</span>字段名称
          </label>
          <div class="layui-input-inline">
              <input type="text" id="keyname" required lay-verify="required"
              autocomplete="off" class="layui-input" value="" placeholder="类似:颜色,型号,尺码">
          </div>
          <div class="layui-form-item" id="sku-key-type-0">
            <label for="L_repass" class="layui-form-label"></label>
            <a class="layui-btn" href="javascript:addskukey();">确定</a>
            <a class="layui-btn" href="javascript:ressku();">取消</a>
          </div>
          <div class="layui-form-item" id="sku-key-type-1">
            <label for="L_repass" class="layui-form-label"></label>
            <a class="layui-btn" href="javascript:editskukey();">修改</a>
            <a class="layui-btn" href="javascript:delkey();">删除</a>
            <a class="layui-btn" href="javascript:ressku();">取消</a>
          </div>
        </div>
      </div>
      <div class="sku-key" id="sku-value" style="display: none;">
        <div class="layui-form-item">
          <label for="valuename" class="layui-form-label">
              <span class="x-red">*</span>字段数值
          </label>
          <div class="layui-input-inline">
              <input type="text" id="valuename" required lay-verify="required"
              autocomplete="off" class="layui-input" value="" placeholder="类似:白色,A类,39码">
          </div>
          <div class="layui-form-item" id="sku-value-type-0">
            <label for="L_repass" class="layui-form-label"></label>
            <a class="layui-btn" href="javascript:addskuvalue();">确定</a>
            <a class="layui-btn" href="javascript:ressku();">取消</a>
          </div>
          <div class="layui-form-item" id="sku-value-type-1">
            <label for="L_repass" class="layui-form-label"></label>
            <a class="layui-btn" href="javascript:editskuvalue();">修改</a>
            <a class="layui-btn" href="javascript:delvalue();">删除</a>
            <a class="layui-btn" href="javascript:ressku();">取消</a>
          </div>
      </div>
      </div>
      <div class="sku-key" id="attr-price" style="display: none;">
        <div class="layui-form-item">
          <label for="valuename" class="layui-form-label">
              <span class="x-red">*</span>价格
          </label>
          <div class="layui-input-inline">
              <input type="text" id="value-attr-price" required lay-verify="required" autocomplete="off" class="layui-input" value="" placeholder="0">
          </div>
          <div class="layui-form-item" id="sku-value-type-0">
            <label for="L_repass" class="layui-form-label"></label>
            <a class="layui-btn" href="javascript:attr_price();">确定</a>
            <a class="layui-btn" href="javascript:ressku();">取消</a>
          </div>
      </div>
      </div>
      <div class="sku-key" id="attr-stock" style="display: none;">
        <div class="layui-form-item">
          <label for="valuename" class="layui-form-label">
              <span class="x-red">*</span>库存
          </label>
          <div class="layui-input-inline">
              <input type="text" id="value-attr-stock" required lay-verify="required" autocomplete="off" class="layui-input" value="" placeholder="0">
          </div>
          <div class="layui-form-item" id="sku-value-type-0">
            <label for="L_repass" class="layui-form-label"></label>
            <a class="layui-btn" href="javascript:attr_stock();">确定</a>
            <a class="layui-btn" href="javascript:ressku();">取消</a>
          </div>
      </div>
      </div>
      
      <div class="sku-key" id="attr-info" style="display: none;">
        <div class="layui-form-item">
          <label for="valuename" class="layui-form-label">
              <span class="x-red">*</span>说明
          </label>
          <div class="layui-input-inline">
              <input type="text" id="value-attr-info" required lay-verify="required" autocomplete="off" class="layui-input" value="" placeholder="0">
          </div>
          <div class="layui-form-item" id="sku-value-type-0">
            <label for="L_repass" class="layui-form-label"></label>
            <a class="layui-btn" href="javascript:attr_info();">确定</a>
            <a class="layui-btn" href="javascript:ressku();">取消</a>
          </div>
      </div>
      </div>
        <form class="layui-form">
          </div>
          <div class="layui-form-item">
              <label for="name" class="layui-form-label">
                  <span class="x-red">*</span>商品名称
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="name" name="name" required lay-verify="required"
                  autocomplete="off" class="layui-input" value="{$info.name|default=''}">
              </div>
          </div>
          <div class="layui-form-item">
            <label for="classify_id" class="layui-form-label">
                <span class="x-red">*</span>分类
            </label>
            <div class="layui-input-inline">
                <select name="classify_id" id="classify_id">
                    {volist name="menu" id="value"}
                    <option value="{$value.id}" {notempty name="$info"}{eq name="value.id" value="$info.classify_id"}selected{/eq}{/notempty}>{$value.name}</option>
                    {/volist}
                </select>
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">*</span>封面图片
            </label>
            <input type="text" style="display: none;" id="image" name="image" value="{$info.image|default=''}">
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="test1">上传图片</button>
                <div class="layui-upload-list">
                  <img class="layui-upload-img" id="demo1" src="{$info.image|default=''}">
                  <p id="demoText"></p>
                </div>
              </div>   
          </div>
          <div class="layui-form-item">
              <label for="price" class="layui-form-label">
                  <span class="x-red">*</span>商品价格
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="price" name="price" required lay-verify="required"
                  autocomplete="off" class="layui-input" value="{$info.price|default=''}">
              </div>
          </div>
          <div class="layui-form-item">
              <label for="price" class="layui-form-label">
                  商品规格-参
              </label>
              <div class="layui-input-inline" id="sku-key-list" style="min-width: 300px;width: auto;">
                <div class="sku-key-title" id="key_title">
                  {volist name="keys" id="value"}
                  <div class="sku-key-title-list" id="all{$value.uniqid}">
                    <div class="sku-key-title-list-key" id="key{$value.uniqid}">
                      <a href="javascript:showskukey(1,'{$value.key}','{$value.uniqid}')">{$value.key}</a>
                    </div>
                    <div class="sku-key-title-list-value" id="value-{$value.uniqid}">
                    {volist name="value.value_list" id="item"}
                    <div class="sku-key-title-list-value" id="value-info-{$item.uniqid}">
                      <a href="javascript:showskuvalue('{$value.uniqid}','{$value.key}',1,'{$item.uniqid}','{$item.value}');">
                        {$item.value}
                      </a>
                    </div>
                    {/volist}
                    </div>
                    <div class="sku-key-title-list-option">
                      <a href="javascript:showskuvalue('{$value.uniqid}','{$value.key}');">
                        添加
                      </a>
                    </div>
                  </div>
                  {/volist}
                </div>
                <a class="layui-btn" href="javascript:showskukey();">新增规格</a>
              </div>
          </div>
          <div class="layui-form-item">
            <label for="price" class="layui-form-label">
                商品规格-值
            </label>
            <div class="layui-input-inline" style="min-width: 300px;width: auto;">
                <table class="sku-table">
                  <thead>
                    <tr>
                      <th>名称</th>
                      <th>图片</th>
                      <th>价格</th>
                      <th>库存</th>
                      <th>说明</th>
                    </tr>
                  </thead>
                  <tbody id="sku_table">
                    {volist name="sku" id="value"}
                    <tr>
                      <td id="name{$value.uniqid}">{$value.name}</td>
                      <td><img src="{$value.image}" id="img{$value.uniqid}" onclick="upload_image('{$value.uniqid}')"></td>
                      <td id="price{$value.uniqid}"><a href="javascript:showattrprice('{$value.uniqid}','{$value.price}');">{$value.price}</a></td>
                      <td id="stock{$value.uniqid}"><a href="javascript:showattrstock('{$value.uniqid}','{$value.stock}');">{$value.stock}</a></td>
                      <td id="info{$value.uniqid}"><a href="javascript:showattrinfo('{$value.uniqid}','{$value.info}');">{$value.info}</a></td>
                    </tr>
                    {/volist}
                  </tbody>
                  <tfoot>
                    <tr>
                      <td colspan="5">
                        
                      </td>
                    </tr>
                  </tfoot>
                </table>
            </div>
        </div>
          <div class="layui-form-item">
              <label for="status" class="layui-form-label">
                  状态
              </label>
              <div class="layui-input-inline">
                  <select name="status" id="status">
                    <option value="1" {notempty name="$info"}{eq name="info.status" value="1"}selected{/eq}{/notempty}>上架</option>
                    <option value="2" {notempty name="$info"}{eq name="info.status" value="2"}selected{/eq}{/notempty}>下架</option>
                  </select>
              </div>
          </div>
          <div class="layui-form-item layui-form-text">
              <label for="desc" class="layui-form-label">
                  简单描述
              </label>
              <div class="layui-input-block">
                  <input placeholder="请输入内容" type="text" id="info" name="info" class="layui-input" value="{$info.info|default=''}">
              </div>
          </div>
          <!-- <div class="layui-form-item layui-form-text">
            <label for="desc" class="layui-form-label">
                详细描述
            </label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" type="text" id="desc" name="desc" class="layui-textarea"></textarea>
            </div>
          </div> -->
          <div class="layui-form-item">
              <label for="L_repass" class="layui-form-label">
              </label>
              <button  class="layui-btn" lay-filter="add" lay-submit="">
                  增加
              </button>
          </div>
      </form>
    </div>
    <script>
        layui.use(['form','layer'], function(){
            $ = layui.jquery;
          var form = layui.form
          ,layer = layui.layer;
        
          //自定义验证规则
          form.verify({
            name: function(value){
              if(value.length < 2){
                return '昵称至少得2个字符啊';
              }
            }
          });

          //监听提交
          form.on('submit(add)', function(data){
            let goods = {
              name:document.getElementById('name').value,
              classify_id:document.getElementById('classify_id').value,
              image:document.getElementById('image').value,
              price:document.getElementById('price').value,
              status:document.getElementById('status').value,
              info:document.getElementById('info').value,
            };
            console.log(goods);
            //发异步，把数据提交给php
            $.ajax({
                url: '/admin/goods/info/{$id}', // 你的 PHP 脚本的 URL  
                type: 'post', // 请求类型，可以是 'GET' 或 'POST'  
                dataType: 'json', // 预期服务器返回的数据类型  
                data: {goods:goods,sku:sku_attr,sku_data:sku_data},
                success: function(data) { 
                    layer.alert("增加成功", {icon: 6},function () {
                        // 获得frame索引
                        var index = parent.layer.getFrameIndex(window.name);
                        //关闭当前frame
                        parent.location.reload();
                        parent.layer.close(index);
                    });
                }
            });
            return false;
          });
        });
    </script>
  </body>
  <script>
    layui.use('upload', function(){
      var $ = layui.jquery
      ,upload = layui.upload;
      
      //普通图片上传
      var uploadInst = upload.render({
        elem: '#test1',
        url: '/image'
        ,before: function(obj){
          //预读本地文件示例，不支持ie8
          obj.preview(function(index, file, result){
            $('#demo1').attr('src', result); //图片链接（base64）
          });
        }
        ,done: function(res){
          //如果上传失败
          if(res.code != 200){
            return layer.msg('上传失败');
          }
          $('#image').attr('value', res.data);
          //上传成功
        }
        ,error: function(){
          //演示失败状态，并实现重传
          var demoText = $('#demoText');
          demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
          demoText.find('.demo-reload').on('click', function(){
            uploadInst.upload();
          });
        }
      });
      //多图片上传
      upload.render({
        elem: '#test2'
        ,url: '/upload/'
        ,multiple: true
        ,before: function(obj){
          //预读本地文件示例，不支持ie8
          obj.preview(function(index, file, result){
            $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
          });
        }
        ,done: function(res){
          //上传完毕
        }
      });
      
      //指定允许上传的文件类型
      upload.render({
        elem: '#test3'
        ,url: '/upload/'
        ,accept: 'file' //普通文件
        ,done: function(res){
          console.log(res)
        }
      });
      upload.render({ //允许上传的文件后缀
        elem: '#test4'
        ,url: '/upload/'
        ,accept: 'file' //普通文件
        ,exts: 'zip|rar|7z' //只允许上传压缩文件
        ,done: function(res){
          console.log(res)
        }
      });
      upload.render({
        elem: '#test5'
        ,url: '/upload/'
        ,accept: 'video' //视频
        ,done: function(res){
          console.log(res)
        }
      });
      upload.render({
        elem: '#test6'
        ,url: '/upload/'
        ,accept: 'audio' //音频
        ,done: function(res){
          console.log(res)
        }
      });
      
      //设定文件大小限制
      upload.render({
        elem: '#test7'
        ,url: '/upload/'
        ,size: 60 //限制文件大小，单位 KB
        ,done: function(res){
          console.log(res)
        }
      });
      
      //同时绑定多个元素，并将属性设定在元素上
      upload.render({
        elem: '.demoMore'
        ,before: function(){
          layer.tips('接口地址：'+ this.url, this.item, {tips: 1});
        }
        ,done: function(res, index, upload){
          var item = this.item;
          console.log(item); //获取当前触发上传的元素，layui 2.1.0 新增
        }
      })
      
      //选完文件后不自动上传
      upload.render({
        elem: '#test8'
        ,url: '/upload/'
        ,auto: false
        //,multiple: true
        ,bindAction: '#test9'
        ,done: function(res){
          console.log(res)
        }
      });
      
      //拖拽上传
      upload.render({
        elem: '#test10'
        ,url: '/upload/'
        ,done: function(res){
          console.log(res)
        }
      });
      
      //多文件列表示例
      var demoListView = $('#demoList')
      ,uploadListIns = upload.render({
        elem: '#testList'
        ,url: '/upload/'
        ,accept: 'file'
        ,multiple: true
        ,auto: false
        ,bindAction: '#testListAction'
        ,choose: function(obj){   
          var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
          //读取本地文件
          obj.preview(function(index, file, result){
            var tr = $(['<tr id="upload-'+ index +'">'
              ,'<td>'+ file.name +'</td>'
              ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
              ,'<td>等待上传</td>'
              ,'<td>'
                ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
              ,'</td>'
            ,'</tr>'].join(''));
            
            //单个重传
            tr.find('.demo-reload').on('click', function(){
              obj.upload(index, file);
            });
            
            //删除
            tr.find('.demo-delete').on('click', function(){
              delete files[index]; //删除对应的文件
              tr.remove();
              uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
            });
            
            demoListView.append(tr);
          });
        }
        ,done: function(res, index, upload){
          if(res.code == 0){ //上传成功
            var tr = demoListView.find('tr#upload-'+ index)
            ,tds = tr.children();
            tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
            tds.eq(3).html(''); //清空操作
            return delete this.files[index]; //删除文件队列已经上传成功的文件
          }
          this.error(index, upload);
        }
        ,error: function(index, upload){
          var tr = demoListView.find('tr#upload-'+ index)
          ,tds = tr.children();
          tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
          tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
        }
      });
      
      //绑定原始文件域
      upload.render({
        elem: '#test20'
        ,url: '/upload/'
        ,done: function(res){
          console.log(res)
        }
      });
      
    });
    </script>
    <script>
      var sku_data = [
        {volist name="keys" id="value"}
        {"key_name":"{$value.key}","value_list":[
          {volist name="value.value_list" id="item"}
          "{$item.value}",
          {/volist}
        ]},
        {/volist}
      ],
      sku_attr = [
      {volist name="sku" id="value"}
        {"uniqid":"{$value.uniqid}","price":"{$value.price}","stock":"{$value.stock}","info":"{$value.info}","name":"{$value.name}","image":"{$value.image}"},
      {/volist}
      ],
      key_name = '',key_uniqid = '',value_uniqid = '',value_value = '',stock_uniqid = '',image_uniqid = '',price_uniqid = '',info_uniqid = '';
      const fileInput = document.getElementById('upload-image-file');  
      // 监听文件输入元素的 change 事件  
      fileInput.addEventListener('change', function(event) {  
        // 获取选中的文件  
        const file = event.target.files[0];  
        if (file) {  
          // 读取文件为 Base64 编码  
          readFileAsBase64(file);  
        } else {  
          console.error('没有选择文件');  
        }  
      });  
      function readFileAsBase64(file) {  
        return new Promise((resolve, reject) => {  
          const reader = new FileReader();  
          reader.onload = function(event) {  
            // 你可以在这里将 Base64 编码的数据发送到服务器或用于其他操作  
            const base64Image = event.target.result;  
            $.ajax({
                url: '/image', // 你的 PHP 脚本的 URL  
                type: 'post', // 请求类型，可以是 'GET' 或 'POST'  
                dataType: 'json', // 预期服务器返回的数据类型  
                data: {image:base64Image},  
                success: function(data) { 
                  document.getElementById('img'+ image_uniqid).src = data.data;
                  setskuattr(image_uniqid);
                }
            });
          };  
          reader.onerror = function() {  
            reject('文件读取错误');  
          };  
          // 以 DataURL 的形式读取文件  
          reader.readAsDataURL(file);  
        });  
      }  
      
      function showattrprice(uniqid,price = 0){
        price_uniqid = uniqid;
        document.getElementById('value-attr-price').value = price;
        document.getElementById('attr-price').style = 'display:block';
      }

      function showattrinfo(uniqid,info = ''){
        info_uniqid = uniqid;
        document.getElementById('value-attr-info').value = info;
        document.getElementById('attr-info').style = 'display:block';
      }

      function showattrstock(uniqid,stock = 0){
        stock_uniqid = uniqid;
        document.getElementById('value-attr-stock').value = stock;
        document.getElementById('attr-stock').style = 'display:block';
      }
      function attr_info(){
        let info = document.getElementById('value-attr-info').value,
            info_td = document.getElementById('info' + info_uniqid);
        info_td.innerHTML = '<a href="javascript:showattrinfo(\'' + info_uniqid + '\',\'' + info + '\');">' + info + '</a>';
        setskuattr(info_uniqid);
        ressku();
      }

      function attr_stock(){
        let stock = document.getElementById('value-attr-stock').value,
            stock_td = document.getElementById('stock' + stock_uniqid);
        stock_td.innerHTML = '<a href="javascript:showattrstock(\'' + stock_uniqid + '\',\'' + stock + '\');">' + stock + '</a>';
        setskuattr(stock_uniqid);
        ressku();
      }

      function attr_price(){
        let price = document.getElementById('value-attr-price').value,
            price_td = document.getElementById('price' + price_uniqid);
        price_td.innerHTML = '<a href="javascript:showattrprice(\'' + price_uniqid + '\',\'' + price + '\');">' + price + '</a>';
        setskuattr(price_uniqid);
        ressku();
      }

      function setskuattr(uniqid){
        let is_bool = true,
            name = document.getElementById('name' + uniqid).textContent,
            image = document.getElementById('img' + uniqid).src,
            stock = document.getElementById('stock' + uniqid).querySelector('a').textContent,
            price = document.getElementById('price' + uniqid).querySelector('a').textContent,
            info = document.getElementById('info' + uniqid).querySelector('a').textContent;
        for(let i=0;i<sku_attr.length;i++){
          if(sku_attr[i].uniqid == uniqid){
            is_bool = false;
            sku_attr[i].name = name;
            sku_attr[i].info = info;
            sku_attr[i].stock = stock;
            sku_attr[i].price = price;
            sku_attr[i].image = image;
          }
        }
        if (is_bool){
          sku_attr.push({
            "name":name,
            "info":info,
            "stock":stock,
            "image":image,
            "price":price,
            "uniqid":uniqid
          });
        }
        console.log(sku_attr);
      }

      function showskukey(type = 0,key = '',uniqid = ''){
        document.getElementById('keyname').value = key;
        document.getElementById('mask').style = 'display:block';
        document.getElementById('sku-key').style = 'display:block';
        if(type == 1){
          key_uniqid = uniqid;
          key_name = key;
          document.getElementById('sku-key-type-0').style = 'display:none';
          document.getElementById('sku-key-type-1').style = 'display:block';
        }else{
          key_uniqid = '';
          key_name = '';
          document.getElementById('sku-key-type-0').style = 'display:block';
          document.getElementById('sku-key-type-1').style = 'display:none';
        }
      }

      function showskuvalue(id,key,type = 0,uniqid = '',value = ''){
        key_name = key;
        key_uniqid = id;
        document.getElementById('valuename').value = value;
        document.getElementById('mask').style = 'display:block';
        document.getElementById('sku-value').style = 'display:block';
        if(type == 1){
          value_uniqid = uniqid;
          value_value = value;
          document.getElementById('sku-value-type-0').style = 'display:none';
          document.getElementById('sku-value-type-1').style = 'display:block';
        }else{
          value_uniqid = '';
          value_value = '';
          document.getElementById('sku-value-type-0').style = 'display:block';
          document.getElementById('sku-value-type-1').style = 'display:none';
        }
        console.log(value_uniqid);
      }

      function addskukey(){
        let key_title = document.getElementById('key_title'),key = document.getElementById('keyname').value;
        if (!key){
          document.getElementById('keyname').style = 'display:block;border:1px solid red;';
          return ;
        }
        let uniqid = generateRandomId();
        key_title.innerHTML += '<div class="sku-key-title-list" id="all' + uniqid + '">' + 
            '<div class="sku-key-title-list-key" id="key' + uniqid + '"><a href="javascript:showskukey(1,\'' + key + '\',\'' + uniqid + '\')">' + key + '</a></div>'+
            '<div class="sku-key-title-list-value" id="value-' + uniqid + '"></div>' +
            '<div class="sku-key-title-list-option"><a href="javascript:showskuvalue(\'' + uniqid + '\',\'' + key + '\');">添加</a></div>' +
            '</div>';
        sku_data.push({"key_name":key,"value_list":[]});
        ressku();
      }

      function editskukey(){
        let key_title = document.getElementById('key_title'),
            key = document.getElementById('keyname').value,
            key_key = document.getElementById('key' + key_uniqid);
        if (!key){
          document.getElementById('keyname').style = 'display:block;border:1px solid red;';
          return ;
        }
        key_key.innerHTML = '<a href="javascript:showskukey(1,\'' + key + '\',\'' + key_uniqid + '\')">' + key + '</a>';
        for(let i=0;i<sku_data.length;i++){
          if (sku_data[i].key_name != key_name)continue;
          sku_data[i].key_name = key;
        }
        ressku();
      }

      function delkey(){
        let div = document.getElementById('all' + key_uniqid);
        div.parentNode.removeChild(div);
        for(let i=0;i<sku_data.length;i++){
          if (sku_data[i].key_name != key_name)continue;
          sku_data.splice(i,1);  
        }
        setskudata();
        ressku();
      }

      function addskuvalue(){
        let value = document.getElementById('value-' + key_uniqid),
            valuename = document.getElementById('valuename').value,
            uniqid = generateRandomId(),
            string =  '<div class="sku-key-title-list-value" id="value-info-' + uniqid + '"><a href="javascript:showskuvalue(\'' + key_uniqid + '\',\'' + key_name + '\',1,\'' + uniqid + '\',\''+ valuename +'\');">' + valuename + '</a></div>';
        value.innerHTML += string
        for(let i=0;i<sku_data.length;i++){
          console.log(sku_data[i].key_name);
          if (sku_data[i].key_name != key_name)continue;
          sku_data[i].value_list.push(valuename);
        }
        setskudata();
        ressku();
      }

      
      function editskuvalue(){
        let value = document.getElementById('valuename').value,
            value_key = document.getElementById('value-info-' + value_uniqid);
        if (!value){
          document.getElementById('valuename').style = 'display:block;border:1px solid red;';
          return ;
        }
        console.log(value_uniqid);
        value_key.innerHTML = '<a href="javascript:showskuvalue(\'' + key_uniqid + '\',\'' + key_name + '\',1,\'' + value_uniqid + '\',\''+ value +'\');">' + value + '</a>';
        for(let i=0;i<sku_data.length;i++){
          if (sku_data[i].key_name != key_name)continue;
          for(let j=0;j<sku_data[i].value_list.length;j++){
            if (sku_data[i].value_list[j] != value_value)continue;
            sku_data[i].value_list[j] = value;
          }
        }
        setskudata();
        ressku();
      }

      function delvalue(){
        let value = document.getElementById('value-info-' + value_uniqid);
        value.parentNode.removeChild(value);
        for(let i=0;i<sku_data.length;i++){
          console.log(sku_data[i].key_name);
          if (sku_data[i].key_name != key_name)continue;
          for(let j=0;j<sku_data[i].value_list.length;j++){
            if (sku_data[i].value_list[j] != value_value)continue;
            sku_data[i].value_list[j] = valuename;
          }
        }
        setskudata();
        ressku();
      }

      function setskudata(){
        let data = JSON.stringify(sku_data),
            attr = JSON.stringify(sku_attr);
        $.ajax({
            url: '/admin/sku', // 你的 PHP 脚本的 URL  
            type: 'post', // 请求类型，可以是 'GET' 或 'POST'  
            dataType: 'json', // 预期服务器返回的数据类型  
            data: {sku:data,attr:attr},  
            success: function(data) { 
              let sku = data.data.data,string = '';
              for(let i=0;i < sku.length;i++){
                let uniqid = sku[i].uniqid,
                    info = sku[i].info,
                    stock = sku[i].stock,
                    price = sku[i].price;
                if (!price) price = 0;
                string += '<tr>' + 
                  '<td id="name' + uniqid + '">' + sku[i].name + '</td>' + 
                  '<td><img src="' + sku[i].image + '" id="img'+ uniqid +'" onclick="upload_image(\'' + uniqid + '\')"></td>' + 
                  '<td id="price' + uniqid + '"><a href="javascript:showattrprice(\'' + uniqid + '\');">' + price + '</a></td>' + 
                  '<td id="stock' + uniqid + '"><a href="javascript:showattrstock(\'' + uniqid + '\');">' + stock + '</a></td>' + 
                  '<td id="info' + uniqid + '"><a href="javascript:showattrinfo(\'' + uniqid + '\');">' + info + '</a></td>' + 
                  '</tr>';
              }
              sku_attr = data.data.data;
              sku_data = data.data.sku_data;
              document.getElementById('sku_table').innerHTML = string;
            }
        });
      }

      function upload_image(uniqid){
        let file = document.getElementById('upload-image-file');
        image_uniqid = uniqid;
        file.click();
      }

      function generateRandomId() {  
        return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);  
      }  
      function ressku(){
        document.getElementById('mask').style = 'display:none';
        document.getElementById('sku-key').style = 'display:none';
        document.getElementById('sku-value').style = 'display:none';
        document.getElementById('attr-info').style = 'display:none';
        document.getElementById('attr-stock').style = 'display:none';
        document.getElementById('attr-price').style = 'display:none';
      }
    </script>
</html>